<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>合同管理 - SaaS平台管理系统</title>
    <!-- 引入Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <!-- 引入Chart.js -->
    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
    <!-- 引入公共CSS -->
    <link href="./css/common.css" rel="stylesheet">
    <!-- 引入公共JS -->
    <script src="./js/common.js"></script>
    <!-- 合同管理特定样式 -->
    <style>
        /* 内容头部 */
        .content-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 1.5rem;
            flex-wrap: wrap;
            gap: 1rem;
        }

        .content-info {
            flex: 1;
        }

        .content-actions {
            display: flex;
            gap: 0.75rem;
            flex-wrap: wrap;
        }

        /* 按钮样式 */
        .btn {
            padding: 0.75rem 1.5rem;
            border: none;
            border-radius: 8px;
            font-weight: 500;
            font-size: 0.875rem;
            transition: var(--transition);
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
        }

        .btn-primary {
            background-color: var(--primary-color);
            color: #fff;
        }

        .btn-primary:hover {
            background-color: #4338ca;
            transform: translateY(-1px);
        }

        .btn-secondary {
            background-color: #f1f5f9;
            color: var(--secondary-color);
            border: 1px solid #e2e8f0;
        }

        .btn-secondary:hover {
            background-color: #e2e8f0;
        }

        /* 卡片样式 */
        .contracts-card {
            background-color: #fff;
            padding: 1.5rem;
            border-radius: 12px;
            box-shadow: var(--card-shadow);
            border: 1px solid #e2e8f0;
            margin-bottom: 2rem;
        }

        .contracts-card h3 {
            font-size: 1.25rem;
            font-weight: 600;
            color: var(--dark-bg);
            margin-bottom: 1.5rem;
            display: flex;
            align-items: center;
            gap: 0.75rem;
        }

        /* 表格样式 */
        .table-card {
            background-color: #fff;
            border-radius: 12px;
            box-shadow: var(--card-shadow);
            border: 1px solid #e2e8f0;
            overflow: hidden;
        }

        .table-header {
            padding: 1.5rem;
            border-bottom: 1px solid #e2e8f0;
            background-color: #f8fafc;
        }

        .table-title {
            font-size: 1rem;
            font-weight: 600;
            color: var(--dark-bg);
            margin: 0;
        }

        .table-container {
            overflow-x: auto;
        }

        .data-table {
            width: 100%;
            border-collapse: collapse;
        }

        .data-table th,
        .data-table td {
            padding: 1rem;
            text-align: left;
            border-bottom: 1px solid #f1f5f9;
        }

        .data-table th {
            background-color: #f8fafc;
            font-weight: 600;
            color: var(--secondary-color);
            font-size: 0.875rem;
            text-transform: uppercase;
            letter-spacing: 0.05em;
        }

        .data-table td {
            color: var(--dark-bg);
            font-size: 0.875rem;
        }

        .data-table tr:hover {
            background-color: #f8fafc;
        }

        /* 状态标签 */
        .status-badge {
            padding: 0.375rem 0.75rem;
            border-radius: 20px;
            font-size: 0.75rem;
            font-weight: 500;
            display: inline-block;
        }

        .status-active {
            background-color: #d1fae5;
            color: var(--success-color);
        }

        .status-inactive {
            background-color: #fee2e2;
            color: var(--danger-color);
        }

        .status-pending {
            background-color: #fef3c7;
            color: var(--warning-color);
        }

        /* 操作按钮 */
        .action-btn {
            background: none;
            border: none;
            color: var(--secondary-color);
            cursor: pointer;
            padding: 0.5rem;
            border-radius: 6px;
            transition: var(--transition);
            font-size: 1rem;
        }

        .action-btn:hover {
            background-color: #f1f5f9;
            color: var(--primary-color);
        }

        /* 响应式设计 */
        @media (max-width: 768px) {
            .content-header {
                flex-direction: column;
                align-items: stretch;
            }

            .content-actions {
                justify-content: stretch;
            }

            .btn {
                flex: 1;
                justify-content: center;
            }
        }
    </style>
</head>
<body>
    <!-- 加载动画 -->
    <div class="loader"></div>

    <div class="main-container">
        <!-- 侧边栏 -->
        <aside class="sidebar" id="sidebar">
            <div class="sidebar-header">
                <div class="logo">
                    <div class="logo-icon">S</div>
                    <span class="logo-text">平台端系统</span>
                </div>
                <button class="sidebar-toggle" id="sidebarToggle">
                <i class="fa fa-angle-left toggle-icon"></i>
            </button>
            </div>
            <nav class="sidebar-nav">
                <a href="index.html" class="nav-link">
                    <i class="fa fa-dashboard nav-icon"></i>
                    <span class="nav-text">仪表盘</span>
                </a>
                <a href="users.html" class="nav-link">
                    <i class="fa fa-users nav-icon"></i>
                    <span class="nav-text">用户管理</span>
                </a>
                <a href="analytics.html" class="nav-link">
                    <i class="fa fa-bar-chart nav-icon"></i>
                    <span class="nav-text">数据分析</span>
                </a>
                <a href="tenant-settings.html" class="nav-link">
                    <i class="fa fa-building nav-icon"></i>
                    <span class="nav-text">租户设置</span>
                </a>
                <a href="contracts.html" class="nav-link active">
                    <i class="fa fa-file-text-o nav-icon"></i>
                    <span class="nav-text">合同管理</span>
                </a>
                <a href="settings.html" class="nav-link">
                    <i class="fa fa-cog nav-icon"></i>
                    <span class="nav-text">系统设置</span>
                </a>
                <a href="notifications.html" class="nav-link">
                    <i class="fa fa-bell nav-icon"></i>
                    <span class="nav-text">通知中心</span>
                </a>
                <a href="reports.html" class="nav-link">
                    <i class="fa fa-file-text nav-icon"></i>
                    <span class="nav-text">报表管理</span>
                </a>
                <a href="orders.html" class="nav-link">
                    <i class="fa fa-shopping-cart nav-icon"></i>
                    <span class="nav-text">订单管理</span>
                </a>
                <a href="help.html" class="nav-link">
                    <i class="fa fa-question-circle nav-icon"></i>
                    <span class="nav-text">帮助中心</span>
                </a>
            </nav>
        </aside>

        <!-- 主内容 -->
        <main class="main-content" id="mainContent">
            <!-- 顶部导航栏 -->
            <nav class="top-nav">
                <div class="nav-left">
                    <button class="sidebar-toggle d-md-none" id="mobileSidebarToggle">
                        <i class="fa fa-bars"></i>
                    </button>
                    <div class="search-box">
                        <i class="fa fa-search"></i>
                        <input type="text" placeholder="搜索...">
                    </div>
                </div>
                <div class="nav-right">
                    <div class="notification-icon">
                        <i class="fa fa-bell"></i>
                        <span class="notification-badge">3</span>
                    </div>
                    <div class="user-info">
                        <div class="user-avatar">JD</div>
                        <div class="user-details">
                            <div class="user-name">John Doe</div>
                            <div class="user-role">管理员</div>
                        </div>
                        <i class="fa fa-chevron-down"></i>
                    </div>
                </div>
            </nav>

            <!-- 内容区域 -->
            <div class="content">
                <!-- 页面标题 -->
                <div class="page-title">
                    <h1>合同管理</h1>
                </div>

                <!-- 内容头部 -->
                <div class="content-header">
                    <div class="content-info">
                        <p class="text-muted">管理租户合同，包括创建、编辑、查看和终止合同</p>
                    </div>
                    <div class="content-actions">
                        <button class="btn btn-primary">
                            <i class="fa fa-plus"></i>
                            新增合同
                        </button>
                        <button class="btn btn-secondary">
                            <i class="fa fa-refresh"></i>
                            刷新
                        </button>
                    </div>
                </div>

                <!-- 合同列表 -->
                <div class="table-card">
                    <div class="table-header">
                        <h3 class="table-title">合同列表</h3>
                    </div>
                    <div class="table-container">
                        <table class="data-table">
                            <thead>
                                <tr>
                                    <th>合同信息</th>
                                    <th>合同ID</th>
                                    <th>租户</th>
                                    <th>状态</th>
                                    <th>创建时间</th>
                                    <th>生效日期</th>
                                    <th>到期日期</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>
                                        <div>
                                            <div style="font-weight: 600;">企业版合同</div>
                                            <div style="font-size: 0.75rem; color: var(--secondary-color);">2023-01-15 至 2024-01-15</div>
                                        </div>
                                    </td>
                                    <td>contract_001</td>
                                    <td>租户A</td>
                                    <td><span class="status-badge status-active">生效中</span></td>
                                    <td>2023-01-15</td>
                                    <td>2023-01-15</td>
                                    <td>2024-01-15</td>
                                    <td>
                                        <div style="display: flex; gap: 0.5rem;">
                                            <button class="action-btn" title="查看">
                                                <i class="fa fa-eye"></i>
                                            </button>
                                            <button class="action-btn" title="编辑">
                                                <i class="fa fa-edit"></i>
                                            </button>
                                            <button class="action-btn" title="终止">
                                                <i class="fa fa-times"></i>
                                            </button>
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <div>
                                            <div style="font-weight: 600;">基础版合同</div>
                                            <div style="font-size: 0.75rem; color: var(--secondary-color);">2023-02-20 至 2024-02-20</div>
                                        </div>
                                    </td>
                                    <td>contract_002</td>
                                    <td>租户B</td>
                                    <td><span class="status-badge status-active">生效中</span></td>
                                    <td>2023-02-20</td>
                                    <td>2023-02-20</td>
                                    <td>2024-02-20</td>
                                    <td>
                                        <div style="display: flex; gap: 0.5rem;">
                                            <button class="action-btn" title="查看">
                                                <i class="fa fa-eye"></i>
                                            </button>
                                            <button class="action-btn" title="编辑">
                                                <i class="fa fa-edit"></i>
                                            </button>
                                            <button class="action-btn" title="终止">
                                                <i class="fa fa-times"></i>
                                            </button>
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <div>
                                            <div style="font-weight: 600;">专业版合同</div>
                                            <div style="font-size: 0.75rem; color: var(--secondary-color);">2023-03-10 至 2024-03-10</div>
                                        </div>
                                    </td>
                                    <td>contract_003</td>
                                    <td>租户C</td>
                                    <td><span class="status-badge status-inactive">已终止</span></td>
                                    <td>2023-03-10</td>
                                    <td>2023-03-10</td>
                                    <td>2024-03-10</td>
                                    <td>
                                        <div style="display: flex; gap: 0.5rem;">
                                            <button class="action-btn" title="查看">
                                                <i class="fa fa-eye"></i>
                                            </button>
                                            <button class="action-btn" title="编辑">
                                                <i class="fa fa-edit"></i>
                                            </button>
                                            <button class="action-btn" title="删除">
                                                <i class="fa fa-trash"></i>
                                            </button>
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <div>
                                            <div style="font-weight: 600;">企业版合同</div>
                                            <div style="font-size: 0.75rem; color: var(--secondary-color);">2023-04-05 至 2024-04-05</div>
                                        </div>
                                    </td>
                                    <td>contract_004</td>
                                    <td>租户D</td>
                                    <td><span class="status-badge status-pending">待审核</span></td>
                                    <td>2023-04-05</td>
                                    <td>2023-04-05</td>
                                    <td>2024-04-05</td>
                                    <td>
                                        <div style="display: flex; gap: 0.5rem;">
                                            <button class="action-btn" title="查看">
                                                <i class="fa fa-eye"></i>
                                            </button>
                                            <button class="action-btn" title="审核">
                                                <i class="fa fa-check"></i>
                                            </button>
                                            <button class="action-btn" title="拒绝">
                                                <i class="fa fa-times"></i>
                                            </button>
                                        </div>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>

                <!-- 分页 -->
                <nav class="pagination" style="margin-top: 2rem;">
                    <ul style="display: flex; gap: 0.5rem; list-style: none; padding: 0; margin: 0;">
                        <li class="page-item">
                            <a href="#" class="page-link">
                                <i class="fa fa-chevron-left"></i>
                            </a>
                        </li>
                        <li class="page-item">
                            <a href="#" class="page-link active">1</a>
                        </li>
                        <li class="page-item">
                            <a href="#" class="page-link">2</a>
                        </li>
                        <li class="page-item">
                            <a href="#" class="page-link">3</a>
                        </li>
                        <li class="page-item">
                            <a href="#" class="page-link">4</a>
                        </li>
                        <li class="page-item">
                            <a href="#" class="page-link">5</a>
                        </li>
                        <li class="page-item">
                            <a href="#" class="page-link">
                                <i class="fa fa-chevron-right"></i>
                            </a>
                        </li>
                    </ul>
                </nav>
            </div>
        </main>
    </div>

    <!-- 引入Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>